<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>layout 后台大布局 - LayUI</title>

        <link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
    </head>
    <body class="layui-layout-body">
        <div class="layui-layout layui-layout-admin">

            <div class="layui-header">
                <div class="layui-logo">LayUI 后台布局</div>
                <!-- 头部区域（可配合layui已有的水平导航） -->

                <ul class="layui-nav layui-layout-right">
                    <li class="layui-nav-item">
                        <a href="javascript:;">
                            <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
<!--                            <div>${userName}</div>-->
                            <span id="username"></span>
                        </a>
                        <dl class="layui-nav-child">
                            <dd><a href="">基本资料</a></dd>
                            <dd><a href="">安全设置</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item"><a href="#" onclick="logout()">安全退出</a></li>
                </ul>
            </div>

            <div class="layui-side layui-bg-black">
                <div class="layui-side-scroll">
                    <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                    <ul class="layui-nav layui-nav-tree" lay-filter="test">
                        <li class="layui-nav-item layui-nav-itemed">
                            <a class="" href="javascript:;">开放平台后台管理系统</a>
                            <dl class="layui-nav-child">
                                <dd><a href="javascript:;" onclick="openRight('static/html/customer.html')">客户管理</a></dd>
                                <dd><a href="javascript:;" onclick="openRight('static/html/app.html')">应用管理</a></dd>
                                <dd><a href="javascript:;" onclick="openRight('static/html/router.html')">路由管理</a></dd>
                                <dd><a href="javascript:;">订单管理</a></dd>
                                <dd><a href="javascript:;">售后管理</a></dd>
                            </dl>
                        </li>

                    </ul>
                </div>
            </div>

            <div class="layui-body" id="main">
                <!-- 内容主体区域 -->
<!--                <div style="font-size: 40px; color: green; font-family: 楷体; font-weight: bolder";><i>欢迎登录开放平台后台管理系统！</i></div>-->
            </div>

            <div class="layui-footer" style="text-align: center">
                <!-- 底部固定区域 -->
                © layui.com - 底部固定区域
            </div>
        </div>

        <script src="static/js/jquery-1.11.min.js"></script>
        <script src="layui/layui.js"></script>

        <script>
            layui.use('element', function () {
                var element = layui.element;
            });

            //进入index.html后获取login.html登陆成功后通过location.href传过来的参数
            // var userName = localStorage.getItem("username");
            var url = location.href;
            var i = url.indexOf("?");
            var username = url.substr(i+1);
            $("#username").html(username);

            function logout(){
                layer.confirm('确认退出系统？', {btn: ['Yes', 'No']}, function (index) {
                    $.ajax({
                        type:"post",
                        url:"/user/logout",
                        success:function (data) {
                            if(data == 1){
                                //执行提示信息2秒后跳转到登录页面
                                layer.msg("<font color='black'>已安全退出系统</font>",{icon: 1, time:2000})
                                setTimeout(function () {
                                    location.href = "/login.html";
                                },2000);
                            }
                        }
                    });
                    layer.close(index);
                });
            }

            function openRight(url) {
                //在加载数据前先判断是否有登录凭证，如果没有则跳转到登录页面
                $.ajax({
                    type:"post",
                    url:"/user/checkLogin",
                    success:function (data) {
                        if(data == 0){
                            //登录凭证验证失败
                            layer.msg("系统检测到你还未登录！",{icon: 2, time: 2000})
                            setTimeout(function (){
                                location.href = "/login.html";
                            },2000);
                        }else if(data == 1){
                            //加载url对应页面的数据
                            $("#main").load(url);
                        }
                    }
                });
            }
        </script>
    </body>
</html>